<template>
	<div :style="{background:'url('+data.url+')'}"
		style="width: 100vw;height: 100vh;backgroundSize:'100% 100%';display: inline-block;">
		<div :style="{background:'url('+data.urlTitle+')'}" style="width: 100%;height:80px;text-align: center;color: #fff;text-shadow: 0px 2px 1px rgba(7,126,96,0.39);
         font-weight: bold;line-height: 80px;font-size: 30px;">
			任务分配数据信息展示
		</div>
		<img src="../assets/images/menu.png" style="position: fixed;top: 20px;right: 20px;" @click="openMask" />
		<div style="width: 90%;margin:100px auto;color: #fff;z-index: 999;">
			<baseStep :list="data.list" v-if="data.list.length">
				<template v-slot:detail="{item}">
					<div :style="{color:item.status==2?'#fff':'#fff'}"
						style=" width: 160px;margin-top: 20px;font-size: 14px;color: #fff;">
						<div>
							<div class="u-margin-top-10 flex">
								<div class="circle blue" :style="defindColor(item)"></div>
								<div>实验员：{{item.man || '-'}}</div>
							</div>
							<div class="u-margin-top-10 flex">
								<div class="circle" :style="defindColor(item)"></div>
								<div v-if="item.index+1!==item.type">耗时：{{item.time || '-'}} <span
										v-if="item.time ">分钟</span></div>
								<div v-else style="color: #fff;">耗时：正在计算</div>
							</div>
							<div class="u-margin-top-10 flex">
								<div class="circle" :style="defindColor(item)"></div>
								<div>
									耗材：
									<div v-if="item.xiaohao.length" style="margin-top:5px;"
										v-for="(item1,index1) in item.xiaohao">
										{{item1.title}}:{{item1.detail}}
									</div>
									<span v-if="!item.xiaohao.length">--</span>
								</div>
							</div>

							<div class="u-margin-top-10 flex">
								<div class="circle" :style="defindColor(item)"></div>
								<div>设备：
									<div v-if="item.equipment" :style="{color:!item.status?'#F56C6C':''}"
										style="margin-top:5px;" v-for="(item1,index1) in item.equipment">
										{{item1.title}}
									</div>
									<span v-if="!item.equipment">--</span>
								</div>
							</div>
						</div>
					</div>
				</template>
			</baseStep>
		</div>


  <el-drawer
    v-model="data.drawer"
    title="任务分配数据信息展示"
    :direction="data.direction"
  
  >
     <el-collapse v-model="data.activeNames" >
          <el-collapse-item title="核酸实验室" name="1">
             <div class="flex">
				 <div @click="sureActive(item,index)" 
				  v-for="(item,index) in data.taskNav" :key="item.id" 
				  style="padding:7px 10px;border: 1px solid #ebebeb;color: #707070;border-radius: 4px;margin-right: 20px;"
				  :style="{background:data.current==index?'#008dd4':'',color:data.current==index?'#fff':''}">
					 {{item.id}}
				 </div>
			 </div>
          </el-collapse-item>
         
        
        </el-collapse>
  </el-drawer>
		
		
		
	</div>
</template>


<script lang="ts" setup>
	import {
		ref,
		reactive,
		toRefs,
		getCurrentInstance,
		onMounted,
		nextTick
	} from 'vue';
	import router from "@/router";
	import baseStep from '../components/base/baseStep/baseStep.vue'
	import step from '../utils/step'
	import {
		tr
	} from 'element-plus/es/locale';
	const routes = router.options.routes;
	const {
		proxy
	} = getCurrentInstance();
	const data = reactive({
		url: require('../assets/images/bg.png'),
		taskNav: [],
		info: '',
		list: [],
		current: 0,
		urlTitle: require('../assets/images/title_bg.png'),
		drawer: false,
		direction: 'rtl',
		activeNames:''
	})
	
	const openMask = () => {
		data.drawer = true
	}
	const sureActive=(item,index)=>{
		data.current=index;
		getTask()
		
	}

	const defindColor = (item) => {
		return {
			background: item.index + 1 == item.type ? '#67C23A' : item.status == 0 ? '#F56C6C' : item.status == 1 ?
				'#67C23A' : item.status == 2 ? '#C9C9C9' : ''
		}
	}
	const getNav = () => {
		return new Promise((resolve, reject) => {
			proxy.$axios.get('/screen/ids').then(res => {
				data.taskNav = res;
				resolve(res)
			})
		})
	}
	const getTask = () => {
		if (!data.taskNav.length) return
		proxy.$axios.get('/screen/real', {
			scanId: data.taskNav[data.current].id
		}).then(res => {
			data.info = res
			changeStep(res);
		}).catch(err => {})
	}
	const changeStep = (item) => {
		const wx = new step();
		wx.changeStep(item).then(res => {
			data.list = res;
			data.drawer=false
			nextTick()
		})
	}
	onMounted(async () => {
		await getNav()
		getTask()
		setInterval(() => {
			getTask()
		}, 10000)


	})
</script>

<style>
	.circle {
		margin-right: 10px;
		width: 15px;
		height: 15px;
		left: 0;
		top: 2px;
		border-radius: 10px;
		position: relative;
		background: #67C23A;
	}




	.blue::after {
		background: #b3b3b3;
	}
</style>
